<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
	<!--引入layui  -->
	<link rel="stylesheet" href="layui/css/layui.css" media="all">
</head>
	<!--引入layui  -->
	<script src="layui/layui.js" charset="utf-8"></script>
<body>
	<!-- 查询条件输入框 -->
	<div class="layui-form-item" style="margin-top: 10px;">
		<form class="layui-form" onsubmit="return false;">
			<!-- 一对查询条件（一个label加上一个div就是一对查询条件，包含条件描述和条件输入框）  -->
			<label class="layui-form-mid">订单号:</label>
			<div class="layui-input-inline" style="width: 200px;">
				<!-- id 和 name的值，如果实体类有，就跟实体类保存一致  -->
				<input type="text" id="orderId" name="orderId" autocomplete="off" class="layui-input">
			</div>
			
			<label class="layui-form-mid">用户名：</label>
			<div class="layui-input-inline" style="width: 150px;">
				<!-- id 和 name的值，如果是区间的输入框，就不要跟实体类一致，自己定义  -->
				<input type="text" id="name" name="name" autocomplete="off" class="layui-input">
			</div>
			
			<label class="layui-form-mid">订单状态</label>
			<div class="layui-input-inline" style="width: 200px;">
				<select name="status">
					<option value="">请选择</option>
					<option value="0">待付款</option>
					<option value="1">待发货</option>
					<option value="2">待收货</option>
					<option value="3">待评价</option>
					<option value="4">完成</option>
				</select>
			</div>
			<div class="layui-input-inline" style="width: 300px;">
				<button class="layui-btn" lay-submit="" lay-filter="search" id="search" data-type="reload"><i class="layui-icon">&#xe615;</i>搜索</button>
				<button class="layui-btn layui-btn-normal" type="reset" ><i class="layui-icon">&#xe666;</i>重置</button>
			</div>
		</form>
	</div>
	<!-- 查看详情 -->
	<div id="detailDIV" style="display: none; margin-top: 20px;">
		<form class="layui-form" lay-filter="detailForm" id="detailForm"
			action="">
			<div class="layui-form-item">
        <label class="layui-form-label">订单号</label>
        <input type="hidden" id="id" name="id" class="layui-input" value="id">
        <div class="layui-input-inline">
          <input type="text" name="orderId" autocomplete="off" class="layui-input"  disabled="disabled">
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">订单总金额</label>
        <div class="layui-input-inline">
          <input type="text" name="money" autocomplete="off" class="layui-input"  disabled="disabled">
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">订单状态</label>
        <div class="layui-input-inline">
          <input type="text" name="statusName" autocomplete="off" class="layui-input" disabled="disabled">
        </div>
      </div>
		</form>
		<table id="openProductTable" lay-filter="openProductTable">
	            <h3 style="text-align:center">订单产品明细</h3>
	    </table>
	</div>

	<!-- 编辑的弹层DIV  -->
	<div id="editDIV" style="display: none; margin-top: 20px;">
		<form class="layui-form" lay-filter="editForm" id="editForm"
			action="">
			<div class="layui-form-item">
				<label class="layui-form-label">订单的物流名称</label>
				<div class="layui-input-inline">
					<input type="text" name="logisticsName" autocomplete="off"
						class="layui-input">
						<input type="hidden"  name="orderId" > <!--隐藏域，用来保存id的值-->	
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">订单的物流信息</label>
				<div class="layui-input-inline">
					<input type="text" name="logisticsMessage" autocomplete="off"
						class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">订单的物流金额</label>
				<div class="layui-input-inline">
					<input type="text" name="logisticsMoney" autocomplete="off"
						class="layui-input">
				</div>
			</div>
			<div class="layui-btn-container" style="text-align:center;">
				<button class="layui-btn" lay-filter="editSubmitBtn" lay-submit="">修改</button>
			</div>
		</form>
	</div>
	<!--定义数据表格table  -->
	<table class="layui-hide" id="proTable" lay-filter="filterTable"></table>
	<!--	表格里操作栏的查看、编辑等按钮  -->
	<script type="text/html" id="barDemo">
		<a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="detail"><i class="layui-icon">&#xe615;</i>产品明细</a>
		{{# if (d.status == 1){}}
           <a class="layui-btn layui-btn-xs layui-btn-primary" lay-filter="isLockSwitch" lay-event="edit"><i class="layui-icon">&#xe642;</i>发货</a>	
        {{# } }}
	</script>
	<script>
	/*定义好各种组件   */
	layui.use(['laydate','layer','form','table','tree','upload'], function() {
		var laydate = layui.laydate	//日期组件
			,layer = layui.layer	//弹层组件
			,form = layui.form		//表单组件
			,tree = layui.tree		//树形结构组件
			,upload = layui.upload  //上传组件
			,$= layui.jquery    	//jquery
			,table = layui.table;	//表格组件
			 /*
				条件查询
			*/
		    form.on('submit(search)', function (data) {
		        var field = data.field;	// 获取form里的所有条件
		        //执行重载
		        table.reload('proTable', {
		            page: { curr: 1 },  // 	表格刷新后，从第一页开始显示		
		            where: field		// 	 查询条件传给后台	
		        });
		    }); 
			/* 开始使用组件 */	
			//使用表格组件，渲染表格，填充数据
		 	table.render({
				elem: '#proTable',	 			//展示数据的表格id（就是上面定义的表格的id）
				url: 'findOrderinfo.do',   	//请求的地址（就是servlet地址）
				method: 'get',				 	//请求方式（get和post）
				even: true, 					//表格隔行变色			
				page: true,					    //使用分页（true开启分页，false关闭分页）
				toolbar: '#toolbarDemo', 	    //表格的工具栏
				title: '产品表', 					//表格的名称
				cols: [
					[{
						/*第一列是固定在最左边的复选框  */
						field: 'ck',	// ck是默认值		
						fixed: 'left',  // 固定在最左边
						type: 'checkbox',  // 全部是复选框
						width: 100		//列宽
					},{
						field: 'orderId',	 //跟实体类的属性对应（显示的就是这个属性的值）  必须有
						align:'center',  //数据的对齐方式（left、center、right）    可选
						width: 250,		// 列的宽度							可选
						title: '订单号',	// 表头名称							必须有
						sort: true		// 开启排序							可选
					},{
						field: 'name',
						title: '用户名',
						width: 150,
						//fixed: 'center',
					}, {
						field: 'money',				//跟实体类的属性对应（显示的就是这个属性的值）  必须有
						width: 120,					// 列的宽度							可选
						title: '订单价格'				// 表头名称							必须有
					},{
						field: 'status',			//跟实体类的属性对应（显示的就是这个属性的值）  必须有
						width: 120,					// 列的宽度							可选
						title: '订单状态',
						fixed: 'right', 
						templet: function (d) {
							 if (d.status == 4) {
								 return '<div style="color:#5FB878;" >已完成</div>';
							  }else if(d.status == 0){
								 return '<div style="color:#FF5722;" >待付款</div>';
							  }else if(d.status == 1){
								 return '<div style="color:#FFB800;" >待发货</div>';
							  }else if(d.status == 2){
								  return '<div style="color:#1E9FFF;" >待收货</div>';
							  }else if(d.status == 3){
								  return '<div style="color:#2F4056;" >待评价</div>';
							  }else{
								  return '<div style="color:#c2c2c2;" >000000</div>';
							  }
						   }
					},{
						field: 'name', 
						title: '收货人姓名',
						width: 120,
					},{
						/*最后一列是操作按钮列，里面是各种操作按钮，比如 查看详情、删除、修改  */
						fixed: 'right',	// 固定在最右边
						width: 230,
						title: '操作',				// 表头名称
						toolbar: '#barDemo'		// 指定操作按钮的id
					}]
				]
			});
			//表格数据里的事件监听
		 	table.on('tool(filterTable)',function(obj){
				var data = obj.data;	//	获取当前行的数据
				var event = obj.event;	// 	获取lay-event的值(根据这个值来判断是什么按钮)
				if(event == 'detail'){	// 查看详情操作
					
					// 清空form里的数据
					$("#detailForm")[0].reset();
					
					//	数据回显
					form.val("detailForm",data);
					//	打开弹层
					var orderId = data.orderId;
				     $.ajax({
                    type: "get",
                    url: 'findOrder.do',
                    data: {
                        "orderId": orderId
                    },
                    success: function (res) {
                        if (res.code == 0) {
                            layer.open({
                                type: 1,
                                content: $('#detailDIV'),
                                title: '您正在查看订单号为【'+ orderId + '】的信息',
                                area: ['700px', '600px'], //宽高
                                btn: ["确定"],
                                btn1: function (index){
                                 layer.close(index);
                                    window.location.reload();
                                },
                                success: function () {
                                    table.render({
                                        elem: '#openProductTable', 
                                        data:res.data,
                                        page: false //关闭分页
                                        , cols: [[ //表头
                                             {field: 'pro_id', title: '产品编号'}
                                            , {field: 'pName', title: '产品名称'}
                                            , {field: 'imgMain', title: '产品图片',templet:
                        						'<div><img src="../{{d.imgMain}}"></div>'}
                                            , {field: 'price', title: '产品价格'}
                                            , {field: 'count', title: '产品数量'}
                                            , {field: 'size', title: '产品尺寸'}
                                        ]]
                                    });
                                }
                            })
 
                        }
 
                    }
                })
				}else if(event == 'edit'){	// 编辑操作
					
					// 清空form里的数据
					$("#editForm")[0].reset();
					//数据回显
					form.val("editForm",data);
					//打开弹层
					layer.open({
						type: 1,
						title: '您正在编辑编号为【'+data.orderId+'】信息',
						content: $("#editDIV"),
						area: ['60%','80%']
					});
				}
			});
		 	//监听修改弹层的提交按钮（当点击修改弹层的提交按钮执行这里）
			  form.on('submit(editSubmitBtn)', function (data) {
				  $.ajax({
						type: 'post', 				
						url: 'updateOrderinfo.do',	 				
						data: $("#editForm").serialize(),
						dataType: 'json', 				
						success: function(res) { //提交成功
							 layer.alert(res.msg, {
					              icon: 6
					            }, function () {
					            	//关闭弹层
					            	layer.closeAll();
					            	//刷新表格
					            	table.reload('proTable',{page:{curr:1}});
					            });
						},
						error: function() { //提交失败
							alert("系统异常！！")
						}
					}); 

			    return false;
			  });
	});
	
	</script>

</body>
</html>